<template>
	<view>
		<u-navbar :is-back="false" title="选择城市" :border-bottom="false"></u-navbar>
		<view class="selected">
			<view class="title">
				已选 :
				{{ vuex_city == '' ? '请选择城市' : vuex_city }}
			</view>
		</view>
		<view class="location" @click="setLocation">
			<view class="title">当前定位</view>
			<view class="body">
				<view class="left">
					<image src="../../static/navigate.png" mode="widthFix" class="img"></image>
					{{ locationCity }}
				</view>
				<view class="right">切换城市</view>
			</view>
		</view>
		<view class="hot">
			<view class="title">热门城市</view>
			<view class="body">
				<view class="tag" v-for="(item, index) in hotList" :key="index" @click="clickCity(item)">{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import wxGetAddress from '../common/wxGetAddress.js'
import QQMapWX from "../common/qqmap-wx-jssdk.js";
import store from "@/store"
import { mapGetters } from 'vuex'

export default {
	data() {
		return {
			locationCity: '',
			address: '',	//当前地址信息
			adres: "", //位置信息
			latitude: '',
			longitude: '',
			geographicLocation: '', // 所在经纬度
			hotList: ['杭州市', '郑州市', '北京市', '上海市', '广州市', '深圳市'],
			vuex_city: '',
		}
	},
	onLoad() {
		this.findLocation()
	},

	created() {
		this.unsubscribe = this.$store.subscribe((mutation, state) => {
			if (mutation.type === 'SET_CITY') {
				// 当 vuex_city 发生变化时，更新自己的数据
				this.findLocation(state.city)
			}
		})
	},
	beforeDestroy() {
		// 取消订阅，防止内存泄漏
		this.unsubscribe()
	},

	methods: {
		clickCity(item) {
			this.$u.vuex('vuex_city', item);
			return uni.reLaunch({
				url: '../index'
			});
		},
		setLocation() {
			this.findLocation()
			this.$u.vuex('vuex_city', this.locationCity);
			return uni.reLaunch({
				url: '../index'
			});
		},


		findLocation() {
			uni.showLoading({ title: "定位中....", mask: true })
			uni.getLocation({
				type: 'gcj02',
				success: async res => {
					let { longitude, latitude } = res;
					console.log(res, '2222222222');
					let result = await wxGetAddress({ longitude, latitude });
					let province = result.regeocodeData.addressComponent.province
					let cityName = result.regeocodeData.addressComponent.city
					this.locationCity = cityName
					let storageData = uni.getStorageSync('storage_data');
					storageData.vuex_city = cityName
					uni.setStorageSync('storage_data', storageData);
					let vuex_city = storageData.vuex_city
					this.vuex_city = vuex_city
					console.log(vuex_city, '更新后的定位');
					uni.hideLoading();


				}
			});

		},




	}
}
</script>

<style lang="scss" scoped>
.selected {
	.title {
		font-size: 30rpx;
		color: $u-main-color;
		margin: 30rpx 20rpx;
		font-weight: 600;
		margin-left: 30rpx;
	}
}

.location {
	background: #FFFFFF;
	border-radius: 18rpx;
	padding: 3rpx 0;
	margin: 20rpx;

	.title {
		font-size: 22rpx;
		color: $u-tips-color;
		margin: 30rpx 20rpx;
	}

	.body {
		margin: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;

		.left {
			font-size: 32rpx;
			font-weight: 800;
			display: flex;
			justify-content: center;
			align-items: center;

			.img {
				width: 35rpx;
				margin-right: 12rpx;
			}
		}

		.right {
			color: #2979ff;
			font-weight: 600;
			margin-right: 10rpx;
		}

		;
	}
}

.hot {
	.title {
		font-size: 30rpx;
		color: $u-main-color;
		margin: 30rpx 20rpx;
		font-weight: 600;
		margin-left: 30rpx;
	}

	.body {
		background: #FFFFFF;
		padding-bottom: 15rpx;
		border-radius: 18rpx;
		margin: 20rpx;

		.tag {
			display: inline-block;
			width: 137rpx;
			height: 75rpx;
			line-height: 75rpx;
			font-size: 26rpx;
			color: $u-content-color;
			margin: 20rpx 20rpx 5rpx 20rpx;
			padding: 5rpx 10rpx;
			text-align: center;
			background-color: $u-bg-color;
			border-radius: 12rpx;
		}
	}
}
</style>
